<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>列表渲染</title>
    <script src="../js/vue.js"></script>
</head>
<body>
<div id="app">
    <h1>{{msg}}</h1>
    <ul>
        <li>张三</li>
        <li>李四</li>
        <li>王五</li>
    </ul>
    <!-- 动态列表 -->
    <ul>
        <!--
            1. v-for 要写在循环项上
            2. v-for 的语法规则:
                v-for="" 变量名 in/of 数组
                变量名 代表了 数组中的每一个元素
         -->
        <li v-for="fd in names">{{fd}}</li>
    </ul>

    <ul>
        <li v-for="name of names">{{namex}}</li>
    </ul>
    <ul>
        <li v-for="name,x of names">{{namex}}{{x}}</li>
    </ul>

    <ul>
        <li v-for="(vip,index) of vips">
            会员名: {{vip.name}},年龄: {{vip.age}}岁
        </li>
    </ul>

    <table>
        <tr>
            <th>序号</th>
            <th>会员名</th>
            <th>年龄</th>
            <th>选择</th>
        </tr>
        <tr v-for="(vip,index) in vips">
            <td>{{index+1}}</td>
            <td>{{vip.name}}</td>
            <td>{{vip.age}}</td>
            <td><input type="checkbox"></td>
        </tr>
    </table>

    <h2>遍历对象的属性</h2>

    <ul>
        <li v-for="(value,propertyName) of user">
            {{propertyName}},{{value}}
        </li>
    </ul>


    <h2>遍历字符串</h2>
    <ul>
        <li v-for="(c,index) of str">
            {{index}},{{c}}
        </li>
    </ul>


    <h2>遍历指定的次数</h2>
    <ul>
        <li v-for="(x,y) of counter">
            {{x}},{{y}}
        </li>
    </ul>


    <ul>
        <li v-for="(num,index) of counter">
            {{num}},{{index}}
        </li>
    </ul>


    <h2>遍历数组</h2>
<!--    静态列表-->
    <ul>
        <li>张三</li>
        <li>李四</li>
        <li>王五</li>
    </ul>



</div>

<script>
    const vm = new Vue ({
        el : '#app',
        data : {
            msg:'列表渲染',
            names : ['jack','lucy','james'],
            vips : [
                {id:'111',name:'jack',age:20},
                {id:'222',name:'lucy',age:20},
                {id:'333',name:'james',age:20}
            ],
            user:{
                id:'111',
                name:'张三',
                gender:'男'
            },
            str :'RainbowSea',
            counter : 10
        }
    })
</script>



</body>
</html>